<script setup>
import { ref, inject, watch, onBeforeUnmount } from 'vue'

const mapScene = inject('mapScene') // 注入 map 变量

const rafId = ref(null) // 动画帧回调
let rotate = true // 控制旋转开关

// 监听 map 变量的变化
watch(
  () => mapScene?.map.value, // 监听 mapScene.map 的变化
  (newMap) => {
    // console.log('RotateView newMap', newMap)
    // 如果拿到就开始旋转，组件卸载没拿到就停止
    if (newMap) {
      newMap.flyTo({
        center: [114.3055, 30.5928],
        zoom: 1,
        pitch: 0,
        bearing: 0,
      })
      rotateMap(newMap)
    } else {
      // stopRotate()
    }
  },
  { immediate: true }, // 立即执行一次，以防初始值已经存在
)

// 开始旋转函数
function rotateMap(map) {
  // 缩放就停止旋转
  if (map.isZooming()) {
    rotate = false
  } else {
    rotate = true
  }
  if (rotate) {
    const center = map.getCenter() // 获取当前中心点
    center.lng -= 0.01 // 每次旋转0.1度
    map.setCenter(center) // 设置新的中心点
    if (center.lng < -180) center.lng = 180
  }
  rafId.value = requestAnimationFrame(() => rotateMap(map))
}

// 停止执行动画函数
function stopRotate() {
  if (rafId.value) {
    cancelAnimationFrame(rafId.value)
    rafId.value = null
  }
}

// 组件卸载时停止旋转
onBeforeUnmount(() => {
  stopRotate()
})
</script>

<template>
  <div>
    <h1>Rotate View</h1>
  </div>
</template>

<style scoped></style>
